<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0,user-scalable=no">
    <title>国舞飞扬抽奖活动</title>
    <link rel="stylesheet" type="text/css" href="static/css/index.min.css">
    <script type="text/javascript" src="static/js/jquery.min.js"></script>
    <script type="text/javascript" src="static/js/flexible.js"></script>
    <script type="text/javascript" src="static/js/vue.min.js"></script>
    <script type="text/javascript" src="dist/js/region.min.js"></script>
</head>
<body>
<div id="lottery" class="container-award">
    <div class="container-wrap">
        <div class="container-wrap-bg" @click="shuffle">
            <img class="img-responsive" src="src/images/lottery-elements-bg.jpg">
        </div>
        <div v-show="awardList.length < 1" class="loading-spinner"></div>
        <div v-show="awardList.length > 0" style="display: none">
            <h4 class="award-count">你有<span class="number">{{lotteryNumber}}</span>次抽奖机会</h4>
            <div class="light light-yellow fadeIn">
                <img class="img-responsive" src="static/images/lottery-light-yellow.png">
            </div>
            <div class="light light-pink fadeIn">
                <img class="img-responsive" src="static/images/lottery-light-pink.png">
            </div>
            <transition-group name="flip-list"
                              tag="div"
                              class="award-list">
                <div class="award-item"
                     v-for="(item, index) in awardList" :key="item.key" :data-index="index"
                     :class="{getAward: index === awardIndex}">
                    <transition name="flip"
                                v-on:enter="openedCard(item, index)"
                                v-on:leave="closedCard(item,index)">
                        <a v-if="!awardItemStates[index].show"
                           class="award-item-thumbnail flip award-item-back award-item-draw"
                           href="javascript: void (0);"
                           :key="item.key+'front'"
                           :ref="index+'front'"
                           :data-key="index+'front'"
                           @click="getAward(item, index)">
                            <img class="img-responsive" src="static/images/lottery-click-me.png">
                        </a>
                        <a v-if="awardItemStates[index].show" class="award-item-thumbnail flip award-item-front"
                           href="javascript: void (0)"
                           :key="item.key+'back'"
                           :ref="index+'back'"
                           :data-key="index+'back'"
                           @click="getAward(item, index)">
                            <img v-show="isOpended" class="img-responsive" :src=item.pic>
                            <p v-show="isOpended" class="award-item-text">{{item.prize_name}}</p>
                        </a>
                    </transition>
                </div>
            </transition-group>
            <!--<div class="text-center btn-shuffle-box">-->
            <!--<button type="button" v-if="hasLotteryNumber" class="btn-shuffle" @click="shuffle">抽 奖</button>-->
            <!--</div>-->
        </div>
    </div>

    <!--底部抽奖按钮50-->
    <modal :show.sync="showBindCard" @close="showBindCard=false" :show-header="false">
        <div slot="body">
            <div class="fail-cry">
                <img class="img-responsive" src="static/images/lottery-cry.png">
            </div>
            <p class="text-center left-award-text">很遗憾，您还未绑定卡牌</p>
        </div>
        <div slot="footer">
            <div class="text-center">
                <a href="http://oatest.rogrand.com/static/gwfy/mycard.html" class="btn-get-award">绑定卡牌</a>
            </div>
        </div>
    </modal>

    <!--底部抽奖按钮50-->
    <modal :show.sync="showFailModal" @close="showFailModal=false" ref="failModal" :show-header="false">
        <div slot="body">
            <div class="fail-cry">
                <img class="img-responsive" src="static/images/lottery-cry.png">
            </div>
            <p class="text-center left-award-text">很遗憾您未抽中<br> 您还剩余 <span
                    class="modal-award-count">{{lotteryNumber}}</span> 次抽奖机会</p>
        </div>
        <div slot="footer">
            <div class="text-center">
                <button type="button" v-if="hasLotteryNumber" class="btn-awarding"
                        @click="shuffle">继续抽奖
                </button>
            </div>
        </div>
    </modal>

    <!--底部抽奖按钮50-->
    <modal :show.sync="showInfoCompleteModal" @close="showInfoCompleteModal=false" :show-header="false">
        <div slot="body">
            <div class="complete-smile">
                <img class="img-responsive" src="static/images/lottery-smile.png">
            </div>
            <p class="text-center award-tip">您的信息已经填写完成，<br> 奖品会在3天内给您邮寄～</p>
        </div>
        <div slot="footer">
            <div class="text-center">
                <button type="button" v-if="hasLotteryNumber" class="btn-awarding" @click="shuffle">继续抽奖</button>
                <a href="http://oatest.rogrand.com/static/gwfy/mycard.html" class="btn-get-award">查看奖品</a>
            </div>
        </div>
    </modal>

    <!--底部抽奖按钮50-->
    <modal :show.sync="showAwardSaved" @close="showAwardSaved=false" :show-header="false">
        <div slot="body">
            <div class="complete-smile">
                <img class="img-responsive" src="static/images/lottery-smile.png">
            </div>
            <p class="text-center award-tip">奖品已经存放在您的卡包，请查收 </p>
        </div>
        <div slot="footer">
            <div class="text-center">
                <button type="button" v-if="hasLotteryNumber" class="btn-awarding" @click="shuffle">继续抽奖</button>
                <a href="http://oatest.rogrand.com/static/gwfy/mycard.html" class="btn-get-award">查看奖品</a>
            </div>
        </div>
    </modal>

    <modal :show.sync="showLotteryNumberModal" @close="showLotteryNumberModal = false"
           :auto-close="true">
        <div slot="body">
            <div class="complete-smile lottery-number-smile">
                <img class="img-responsive" src="static/images/lottery-smile.png">
            </div>
            <p class="text-center award-tip">您今日的抽奖次数已用尽！<br> 明天等你哦～</p>
        </div>
    </modal>

    <!--底部抽奖按钮50-->
    <modal :show.sync="showAwardLess" @close="showAwardLess = false" :show-header="false">
        <div slot="body">
            <div class="complete-smile lottery-number-smile">
                <img class="img-responsive" src="static/images/lottery-smile.png">
            </div>
            <p class="text-center award-tip">奖品已抽完！请参加下次活动</p>
        </div>
        <div slot="footer">
            <div class="text-center">
                <button type="button" v-if="hasLotteryNumber" class="btn-awarding" @click="shuffle">继续抽奖</button>
            </div>
        </div>
    </modal>

    <!--底部抽奖按钮50-->
    <modal :show.sync="showVirtual" @close="showVirtual = false" :show-header="false">
        <div slot="body">
            <div class="award-info-area">
                <div class="award-pic">
                    <img class="img-responsive" :src=award.pic>
                    <!--<img class="img-responsive" src="static/images/lottery-coupon.png">-->
                </div>
                <p class="text-center get-award-tip" v-award-title="{name: award.prize_name, type: award.type}"></p>
                <!--<p class="text-center get-award-tip">-->
                <!--恭喜你抽中了50F币<br>已经放到我的卡包-->
                <!--</p>-->
            </div>
            <p class="award-number-tip">您还剩余<span class="modal-award-count">{{lotteryNumber}}</span>次抽奖机会</p>
        </div>
        <div slot="footer">
            <div class="text-center">
                <button type="button" v-if="hasLotteryNumber" class="btn-awarding" @click="shuffle">继续抽奖</button>
                <a href="http://oatest.rogrand.com/static/gwfy/mycard.html" class="btn-get-award">查看奖品</a>
            </div>
        </div>
    </modal>

    <!--底部抽奖按钮40-->
    <modal :show.sync="showPostAddress" class-name="modal-address" @close="confirmSaveAddress">
        <div slot="body">
            <div class="product-img">
                <img class="img-responsive" :src=award.pic>
            </div>
            <p class="text-center get-award-tip" v-award-title="{name: award.prize_name, type: award.type}"></p>
            <p class="text-center adr-tip">请准确填写您的收货地址，奖品会邮寄给您 </p>
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="name" class="control-label">收货人</label>
                    <div class="form-controls">
                        <input type="text" id="name" name="name" v-model="userForm.name"
                               class="form-control">
                    </div>
                </div>
                <div class="form-group form-link-adr">
                    <label class="control-label">收货地址</label>
                    <div class="form-controls">
                        <area-link @select="getAdrArea" :province-id.sync="userPink.proId"
                                   :city-id.sync="userPink.cityId" :country-id.sync="userPink.countryId"></area-link>
                    </div>
                </div>
                <div class="form-group">
                    <input type="text" id="address" name="address" v-model="userForm.address"
                           class="form-control" placeholder="详细地址">

                </div>
                <div class="form-group">
                    <label for="mobile" class="control-label">联系电话</label>
                    <div class="form-controls">
                        <input type="number" id="mobile" name="mobile"
                               v-model="userForm.mobile" class="form-control">

                    </div>
                </div>
            </form>
            <p class="award-number-tip">您还剩余<span class="modal-award-count">{{lotteryNumber}}</span>次抽奖机会</p>
        </div>
        <div slot="footer">
            <div class="text-center">
                <button type="button" class="btn-save" @click="postAddress">确 定</button>
            </div>
        </div>
    </modal>

    <modal :show.sync="showPickThing" class-name="modal-award" @close="showPickThing = false" :show-header="false">
        <div slot="body">
            <div class="award-info-area">
                <div class="product-img">
                    <img class="img-responsive" :src=award.pic>
                </div>
                <p class="text-center get-award-tip" v-award-title="{name: award.prize_name, type: award.type}"></p>
                <p class="area-title">领奖地区<span class="area-tip">（领取时请出示奖券）</span></p>
                <area-link @select="getAwardAdrArea" :province-id.sync="userPink.proId" :city-id.sync="userPink.cityId"
                           :country-id.sync="userPink.countryId"></area-link>
                <div class="address-list">
                    <div class="address-item" v-for="(store, index) in storesAdr" :key="store.id">
                        <p class="mall-name">{{store.name}}</p>
                        <p class="mall-address">{{store.address}}</p>
                    </div>
                    <div v-if="storesAdr.length < 1" class="address-item">
                        <p class="mall-address" style="margin-top: 15px;text-align: center">区域后选择后，自动查询</p>
                    </div>
                </div>
            </div>
            <p class="award-number-tip">您还剩余<span class="modal-award-count">{{lotteryNumber}}</span>次抽奖机会</p>
        </div>
        <div slot="footer">
            <div class="text-center">
                <button type="button" v-if="hasLotteryNumber" class="btn-awarding" @click="shuffle">继续抽奖</button>
                <a href="http://oatest.rogrand.com/static/gwfy/mycard.html" class="btn-get-award">查看奖品</a>
            </div>
        </div>
    </modal>

    <modal :show.sync="showDialogFail" class-name="modal-dialog-alert" :show-mask="false" :show-header="false"
           :auto-close="true"
           :count-time="1000"
           :show-footer="false" @close="showDialogFail = false">
        <div slot="body">
            <div class="modal-state">
                <img src="static/images/lottery-cry.png"><span>{{dialogFailText}}</span></span>
            </div>
        </div>
    </modal>

    <modal :show.sync="showDialogSuccess" class-name="modal-dialog-alert"
           :show-mask="false"
           :show-header="false"
           :auto-close="true"
           :count-time="2000"
           :show-footer="false" @close="showDialogSuccess = false">
        <div slot="body">
            <div class="modal-state">
                <img src="static/images/lottery-smile.png"><span>{{friendlyText}}</span>
            </div>
        </div>
    </modal>

</div>
<!-- template for the modal component -->
<script type="text/x-template" id="modal-template">
    <transition name="modal">
        <div v-show="show" class="modal">
            <div class="modal-wrapper">
                <div class="modal-container" :class="className">
                    <div class="modal-header">
                        <div v-if="showHeader">
                            <slot name="header"></slot>
                            <button class="btn-modal-close" @click="$emit('close')">
                                <img class="img-responsive" src="static/images/btn-modal-close.png">
                            </button>
                        </div>
                    </div>
                    <div class="modal-body">
                        <slot name="body"></slot>
                    </div>
                    <div class="modal-footer" v-if="showFooter">
                        <slot name="footer">
                            <!--<button class="modal-default-button" @click="$emit('close')">OK</button>-->
                        </slot>
                    </div>
                </div>
            </div>
            <div v-if="showMask" class="modal-mask"></div>
        </div>
    </transition>
</script>

<script type="text/x-template" id="area-link">
    <div>
        <div class="area-list">
            <div class="area-item">
                <select class="form-control" name="province" v-model="selectedIds.provinceId"
                        @change="selpro">
                    <option value="">省</option>
                    <option :value="v.id" v-for="(v,i) in pro">{{v.name}}</option>
                </select>
                <!--<label v-if="errors.has('province')" class="error">{{ errors.first('province') }}</label>-->
            </div>
            <div class="area-item">
                <select class="form-control" name="city" v-model="selectedIds.cityId"
                        @change="selcity">
                    <option value="">市</option>
                    <option :value="v.id" v-for="(v,i) in renderCity">{{v.name}}</option>
                </select>
                <!--<label v-if="errors.has('city')" class="error">{{ errors.first('city') }}</label>-->
            </div>
            <div class="area-item">
                <select class="form-control" name="country" @change="result"
                        v-model="selectedIds.countryId">
                    <option value="">县/区</option>
                    <option :value="v.id" v-for="(v,i) in renderCountry">{{v.name}}</option>
                </select>
                <!--<label v-if="errors.has('country')" class="error">{{ errors.first('country') }}</label>-->
            </div>
        </div>
    </div>
</script>

<script type="text/javascript" src="dist/js/vue.award.min.js"></script>
</body>
</html>